<template>
  <div>
    <!-- 基本信息 -->
    <el-card shadow="hover">
      <el-divider content-position="left">基本信息</el-divider>
      <el-form
        v-if="basicModified"
        ref="basicForm"
        :model="basicForm"
        @submit.native.prevent
      >
        <el-form-item label="显示昵称" prop="username">
          <el-input v-model="basicForm.username"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" prop="motto">
          <el-input
            type="textarea"
            v-model="basicForm.motto"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="x-btn-container-right">
            <button
              type="button"
              class="x-btn x-btn-primary"
              @click="cancel('basicForm', 'basicModified')"
            >
              取 消
            </button>
            <button
              type="button"
              class="x-btn"
              @click="submit('basicForm', 'basicModified')"
            >
              确 定
            </button>
          </div>
        </el-form-item>
      </el-form>
      <div v-else>
        <ul class="x-list">
          <li>
            <p>
              <span class="x-label">登录账号：</span>
              <span>{{ user.account ? user.account : "--" }}</span>
            </p>
          </li>
          <li>
            <p>
              <span class="x-label">显示昵称：</span>
              <span>{{ user.username ? user.username : "--" }}</span>
            </p>
          </li>
          <li>
            <p>
              <span class="x-label">个性签名：</span>
              <span>{{ user.motto ? user.motto : "--" }}</span>
            </p>
          </li>
        </ul>
        <div class="x-btn-container-right">
          <button type="button" class="x-btn" @click="modify('basicModified')">
            修改资料
          </button>
        </div>
      </div>
    </el-card>
    <!-- 其他信息 -->
    <el-card shadow="hover">
      <el-divider content-position="left">其他信息</el-divider>
      <el-form v-if="otherModified" ref="otherForm" :model="otherForm">
        <el-form-item label="重新绑定邮箱" prop="email">
          <el-input v-model="otherForm.email"></el-input>
        </el-form-item>
        <el-form-item label="设置新密码" prop="password">
          <el-input
            v-model="otherForm.password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="x-btn-container-right">
            <button
              type="button"
              class="x-btn x-btn-primary"
              @click="cancel('otherForm', 'otherModified')"
            >
              取 消
            </button>
            <button
              type="button"
              class="x-btn"
              @click="submit('otherForm', 'otherModified')"
            >
              确 定
            </button>
          </div>
        </el-form-item>
      </el-form>
      <div v-else>
        <ul class="x-list">
          <li>
            <p>
              <span class="x-label">绑定邮箱：</span>
              <span>{{ user.email ? user.email : "--" }}</span>
            </p>
          </li>
          <li>
            <p>
              <span class="x-label">密码：</span>
              <span>******&nbsp;</span>
            </p>
          </li>
          <li>
            <p>
              <span class="x-label">所属班级：</span>
              <span>{{ user.classroom ? user.classroom : "--" }}</span>
            </p>
          </li>
        </ul>
        <div class="x-btn-container-right">
          <button type="button" class="x-btn" @click="modify('otherModified')">
            修改资料
          </button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "UserInfo",
  data() {
    return {
      user: {
        // account: "xsirl@qq.com",
        // password: "",
        // username: "xsir",
        // email: "xsirl@qq.com",
        // motto: "愿你出走半生，归来仍是少年。",
      },
      basicForm: {},
      otherForm: {},
      basicModified: false,
      otherModified: false,
    };
  },
  computed: {},
  methods: {
    /**
     * 获取用户信息
     */
    getUserInfo() {
      const token = this.$store.getters.token;
      request.get(`/user/info?token=${token}`).then((res) => {
        if (res.code === 200) {
          this.user = res.data;
          this.basicForm = {
            username: this.user.username,
            motto: this.user.motto,
          };
          this.otherForm = {
            email: this.user.email,
            password: "",
          };
        }
      });
    },
    // 切换修改
    modify(modified) {
      this[modified] = !this[modified];
      // console.log(this[modified]);
    },
    // 取消修改
    cancel(formName, modified) {
      // console.log(modified);
      this.$refs[formName].resetFields();
      this[modified] = !this[modified];
    },
    // 确认修改
    submit(formName, modified) {
      request.post("/user/update", this[formName]).then((res) => {
        this[modified] = !this[modified];
        this.$store.commit("user/SET_NAME", this[formName].username);
        for (let o in this[formName]) {
          this.user[o] = this[formName][o];
        }
      });
    },
    modifyPassword() {},
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.el-card + .el-card {
  margin-top: 15px;
}

.x-list {
  padding-left: 1rem;
}
.x-list > li {
  margin-bottom: 1.5rem;
}
.x-list > li > p > span {
  color: #777;
}
.x-list .x-label {
  display: inline-block;
  color: #074b60;
  width: 80px;
  text-align: right;
}

.x-btn-container-right {
  text-align: right;
}
.el-divider__text {
  color: #5fb878;
}
</style>